<template>
  <div>
    <p class="DetilsTitle">
      {{ datas.dcChName }} <span>({{ datas.dcCode }})</span>
    </p>
    <a-descriptions bordered>
      <a-descriptions-item label="标准编号" :span="3">{{ datas.dcCode }}</a-descriptions-item>
      <a-descriptions-item label="中文名称" :span="3">{{ datas.dcChName }}</a-descriptions-item>
      <a-descriptions-item label="英文名称" :span="3">{{ datas.dcEnName }}</a-descriptions-item>
      <a-descriptions-item label="标准说明" :span="3">{{ datas.dcExplain }}</a-descriptions-item>
      <a-descriptions-item label="来源机构" :span="3">{{ datas.dcSourceStructure }}</a-descriptions-item>
      <a-descriptions-item label="是否可为空" :span="3">{{ datas.dcDataNull }}</a-descriptions-item>
      <a-descriptions-item label="数据类型" :span="3">{{ datas.dcDataType }}</a-descriptions-item>
      <template v-if="datas.dcDataType == 'String'">
        <a-descriptions-item label="数据长度" :span="3">{{ datas.dcDataLength }}</a-descriptions-item>
      </template>
      <template v-if="datas.dcDataType == 'Int'">
        <a-descriptions-item label="取值范围" :span="3">{{ datas.dcMinValue }}--{{ datas.dcMaxValue }}</a-descriptions-item>
      </template>
      <template v-if="datas.dcDataType == 'Float'">
        <a-descriptions-item label="数据精度" :span="3">{{ datas.dcDataPrecision }}</a-descriptions-item>
        <a-descriptions-item label="取值范围" :span="3">{{ datas.dcMinValue }}--{{ datas.dcMaxValue }}</a-descriptions-item>
      </template>
      <template v-if="datas.dcDataType == 'Enum'">
        <a-descriptions-item label="枚举范围" :span="3">{{ datas.stopwatchName }}</a-descriptions-item>
      </template>
      <a-descriptions-item label="默认值" :span="3">{{ datas.dcValue }}</a-descriptions-item>
    </a-descriptions>
    <br />
  </div>
</template>
<script lang="ts" setup>
  import { getDataCriterionDetailHooks } from '@/hooks/CatalogDataStandardsHooks/getDataCriterionDetailHooks';
  //从数据库获取数据
  const { datas } = getDataCriterionDetailHooks();
</script>
<style lang="less" scoped>
  .ant-modal {
    .ant-modal-content {
      .ant-modal-body {
        .DetilsTitle {
          font-weight: bold;
          text-align: center;
        }
      }
    }
  }

  .message {
    margin: 0 auto;
    width: 80%;
  }

  .message > tr > :nth-child(1) {
    width: 20%;
    height: 30px;
    background-color: #fafafa;
  }

  .message > tr {
    margin-top: 10px;
    text-align: center;
  }

  :deep(.ant-descriptions-item-label) {
    width: 30%;
  }
</style>
